<template>
	<view class="out">
		<input type="text" v-model="personName" placeholder="请输入name"/>
		<input type="text" v-model="personNameObj.name" placeholder="请输入Obj name"/>
		
		<input type="text" v-model="firstName" placeholder="请输入名"/>
		<input type="text" v-model="lastName" placeholder="请输入姓"/>
		
		<view>全称：{{fullName}}</view>
	</view>
</template>

<script setup>
import {ref,watch, watchEffect} from "vue";

 // 监听字符串 
const personName = ref('');
watch(personName, (newVal,oldVal)=>{
	console.log(newVal)
	console.log(oldVal)
})
// 监听对象
const personNameObj = ref({
	name: 'zs',
	age: 22
})
// 啥时候用：当对象中某一属性发生变化时；
watch(()=>personNameObj.value.name, (newVal, oldVal)=>{
	console.log(newVal)
})
// 监听对象 深度监听，对象发生变化时触发
// 啥时候用：当对象中多个属性发生变化时；或不知道对象里哪个属性发生变化时；
watch(personNameObj, (newVal) => {
	console.log(newVal.name)
}, {deep: true})
//  立即触发 immediate: true
// watch(personNameObj, (newVal) => {
// 	console.log(newVal.name)
// }, {deep: true, immediate: true})

const firstName = ref("迈克尔");
const lastName = ref("乔丹");

const fullName = ref("")

/*
// 监听两个字符串，用数组写法；
watch([firstName,lastName],([NfirstName,NlastName],[OfirstName,OlastName])=>{
	console.log(NfirstName,NlastName); // 新的
	console.log(OfirstName,OlastName); // 老的
})
// 监听两个字符串，还是推荐分别监听
watch(firstName,(nv,ol)=>{
	
})
watch(lastName,(nv,ol)=>{
	
})
*/

// 会立即执行；数据有变化也会执行；
watchEffect(()=>{
	console.log(firstName.value,lastName.value);
})




</script>

<style lang="scss" scoped>
.out{
	padding:20px;
	input{
		border:1px solid #ccc;
		height: 40px;
		padding:0 10px;
		margin:10px 0;
	}
}
</style>
